<template>
	<view class="flex-col align-start bg-default" :class="showTitle ? 'px-12 py-16 radius-12' : ''">
		<view v-if="showTitle" class="w-full text-center text-color-regular fs-16 font-semibold mb-16">活动详情</view>
		<view v-for="(item,i) in contentList" :key="i" class="w-full">
			<view v-if="item.type===1" class="break-all text-color-regular fs-14 font-normal leading-22">
				<text v-if="item.content">{{item.content.replace(/\\n/g, '\n')}}</text>
			</view>
			<view v-else-if="item.type===2" style="font-size:0;">
				<image class="w-full" :show-menu-by-longpress="true" mode="widthFix" :src="item.content"></image>
			</view>
			<view v-else-if="item.type===3">
				<video :src="item.content" style="width:100%"></video>
			</view>
		</view>
	</view>
</template>

<script setup name="ActivityContent">
	import { computed } from 'vue'
	
	const props = defineProps({
		showTitle: {
			type: Boolean,
			default: true
		},
		content: {
			type: String
		}
	})
	
	const contentList = computed(() => {
		try {
			return JSON.parse(props.content) || []
		} catch (err) {
			return [{
				type: 1,
				content: props.content
			}]
		}
	})
	
</script>
